<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${appPath}/common/common.js"></script>
<title></title>
<script type="text/javascript">	
	//添加一级栏目标题
	function addLevelOne(){		
		var title = window.prompt("请输入一级栏目的标题");
		if(title == null) return;
		if(title.trim().length == 0){
			alert("必须提供一级栏目的标题！");			
			return;
		}		
		var fileFolder = window.prompt("请输入一级栏目文件夹名称");
		if(fileFolder == null)return;
		if(fileFolder.trim().length == 0){
			alert("必须提供一级栏目文件夹名称!");
			return;
		}
		if(!/^[a-zA-Z0-9]+$/g.test(fileFolder.trim())){
			alert("一级栏目文件夹名称只能是字母和数字的组合！");
			return;
		}
		var form = getLevelOneForm();
		var hiddenTitle = getSectionTitleHidden();
		var hiddenFolderName = getSectionFolderNameHidden();	
		form.action = "${backPath}/setup/addLevelOne.action";
		hiddenTitle.value = title.trim();
		hiddenFolderName.value = fileFolder.trim();
		form.submit();		
	}

	//编辑一级栏目标题
	function editTitle(td_id,sectionId){
		var td_title = document.getElementById(td_id);
		var title = window.prompt("请输入栏目的一级标题",td_title.innerHTML);		
		if(title == null) return;
		if(title.trim().length == 0){
			alert("必须提供一级栏目的标题！");
			return;
		}
		var td_folderName = document.getElementById(td_id+"_folderName");
		var folderName = window.prompt("请输入栏目的一级标题",td_folderName.innerHTML);
		if(folderName.trim().length == 0){
			alert("必须提供一级栏目文件夹名!");
			return;
		}
		if(!/^[a-zA-Z0-9]+$/g.test(folderName.trim())){
			alert("一级栏目文件夹名称只能是字母和数字的组合！");
			return;
		}
		var form = getLevelOneForm();
		var hiddenId = getSectionIdHidden();
		var hiddenTitle = getSectionTitleHidden();
		var hiddenFolderName = getSectionFolderNameHidden();	
		form.action = "${backPath}/setup/editLevelOne.action";
		hiddenTitle.value = title.trim();
		hiddenFolderName.value = folderName.trim();
		hiddenId.value = sectionId;
		form.submit();	
	}

	//删除一级栏目
	function deleteLevelOne(sectionId){
		var msg = "删除一级栏目会删除栏目下的二级栏目及其相关文件，请再次确认!";
		if(confirm(msg)){
			var form = getLevelOneForm();
			var hiddenId = getSectionIdHidden();
			hiddenId.value = sectionId;
			form.action = "${backPath}/setup/deleteLevelOne.action";
			form.submit();
		}
	}

	//查看二级栏目
	function listLevelTwo(td_id,sectionId){		
		var form = getLevelOneForm();
		var hiddenId = getSectionIdHidden();
		var hiddenTitle = getSectionTitleHidden();
		hiddenId.value = sectionId;
		var td_title = document.getElementById(td_id);
		hiddenTitle.value = td_title.innerHTML; 
		form.action = "${backPath}/setup/listLevelTwo.action";
		form.submit();
	}

	//获得levelONeForm
	function getLevelOneForm(){
		return document.getElementById("levelOneForm");
	}

	//获得"section.sectionId"隐藏域
	function getSectionIdHidden(){
		return document.getElementById("section.sectionId");
	}

	//获得"section.title"隐藏域
	function getSectionTitleHidden(){	
		return document.getElementById("section.title");
	}

	//获得"section.folderName"隐藏域
	function getSectionFolderNameHidden(){	
		return document.getElementById("section.folderName");
	}
	
</script>
<link href="${backPath}/images/skin.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"></script>
<style type="text/css">
<!--
body {	
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	background-color: #EEF2FB;
}

.STYLE1 {font-size: 12px}
.STYLE4 {
	font-size: 12px;
	color: #1F4A65;
	font-weight: bold;
}

a:link {
	font-size: 12px;
	color: #06482a;
	text-decoration: none;

}
a:visited {
	font-size: 12px;
	color: #06482a;
	text-decoration: none;
}
a:hover {
	font-size: 12px;
	color: #FF0000;
	text-decoration: underline;
}
a:active {
	font-size: 12px;
	color: #FF0000;
	text-decoration: none;
}
.STYLE7 {font-size: 12}

-->
</style>
</head>
<body>
<form id="levelOneForm" action="" method="post">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="17" valign="top" background="${backPath}/images/mail_leftbg.gif"><img src="${backPath}/images/left-top-right.gif" width="17" height="29" /></td>
    <td valign="top" background="${backPath}/images/content-bg.gif"><table width="100%" height="31" border="0" cellpadding="0" cellspacing="0" class="left_topbg" id="table2">
      <tr>
        <td height="31"><div class="titlebt">栏目类别</div></td>
      </tr>
    </table></td>
    <td width="16" valign="top" background="${backPath}/images/mail_rightbg.gif"><img src="${backPath}/images/nav-right-bg.gif" width="16" height="29" /></td>
  </tr>
  <tr>
    <td valign="middle" background="${backPath}/images/mail_leftbg.gif">&nbsp;</td>
    <td valign="top" bgcolor="#F7F8F9"><table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="30"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15" height="30"><img src="${backPath}/images/list/tab_031.gif" width="15" height="30" /></td>
        <td width="951" background="${backPath}/images/list/tab_051.gif"><img src="${backPath}/images/list/311.gif" width="16" height="16" /> <span class="STYLE4">一级栏目列表</span></td>
        <td width="281" background="${backPath}/images/list/tab_051.gif"><table border="0" align="right" cellpadding="0" cellspacing="0">
            <tr>              
              <td width="200">              	
              	<table width="88%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td class="STYLE1">
                    	<div align="center">
                    		<img src="${backPath}/images/list/001.gif" width="14" height="14" />                    		
                    			&nbsp;<a id="addLevelOne" href="#" onclick="addLevelOne()">新增一级栏目</a>                    			                                 		
                    	</div></td>                    
                  </tr>
              </table>
                	
              </td>
            </tr>
        </table></td>
        <td width="14"><img src="${backPath}/images/list/tab_071.gif" width="14" height="30" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="9" background="${backPath}/images/list/tab_121.gif">&nbsp;</td>
        <td bgcolor="#EEF2FB"><table width="99%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#9EAEB9">
          <tr>            
            <td width="24%" height="26" background="${backPath}/images/list/tab_141.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">一级栏目标题</div></td>
            <td width="13%" height="26" background="${backPath}/images/list/tab_141.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">一级栏目文件夹</div></td>
            <td width="17%" height="26" background="${backPath}/images/list/tab_141.gif" class="STYLE1"><div align="center" class="STYLE2">子栏目数量</div></td>
            <td width="20%" height="26" background="${backPath}/images/list/tab_141.gif" class="STYLE1"><div align="center" class="STYLE2 STYLE1">查看子栏目</div></td>
            <td width="13%" height="26" background="${backPath}/images/list/tab_141.gif" class="STYLE1"><div align="center" class="STYLE2">编辑</div></td>
            <td width="14%" height="26" background="${backPath}/images/list/tab_141.gif" class="STYLE1"><div align="center" class="STYLE2">删除</div></td>
          </tr>
          <s:if test="%{sections.size == 0}">
          	<tr>
          		<td colspan="6" height="30" bgcolor="#FFFFFF">
          			<div align="center" class="STYLE2 STYLE1">还没有任何一级栏目，请添加！</div>
          		</td>
          	</tr>
          </s:if> 
          <s:else>
          		<c:forEach var="section" items="${sections}" varStatus="status">
	          		<tr>	          		
	          		<c:if test="${status.index % 2 == 0}">
				  		<td class="STYLE2 STYLE1" bgcolor="#FFFFFF" align="center"  id="td_${section.sectionId}">${section.title}</td>
				  		<td class="STYLE2 STYLE1" bgcolor="#FFFFFF" align="center"  id="td_${section.sectionId}_folderName">${section.folderName}</td>
				  		<td class="STYLE2 STYLE1" bgcolor="#FFFFFF" align="center">${section.subCount}</td>
				  		<td height="18" bgcolor="#FFFFFF">
				  			<div align="center"><img src="${backPath}/images/list/037.gif" width="9" height="9" />
				  				<span class="STYLE1"> [</span><a href="#" onclick="listLevelTwo('td_${section.sectionId}',${section.sectionId})">查看子栏目</a><span class="STYLE1">]</span>
				  			</div>
				  		</td>
				  		<td height="18" bgcolor="#FFFFFF">
				  			<div align="center"><img src="${backPath}/images/list/037.gif" width="9" height="9" />
				  				<span class="STYLE1">[
				  					 <c:if test="${section.status == 0}">
				  					 	<a href="#" onclick="editTitle('td_${section.sectionId}',${section.sectionId})">编辑</a>
				  					 </c:if>
				  					 <c:if test="${section.status == 1}">
				  					 	否
				  					 </c:if>
				  				]</span>
				  			</div>
				  		</td>
	           		 	<td height="18" bgcolor="#FFFFFF">
	           		 		<div align="center">
	           		 			<span class="STYLE2"><img src="${backPath}/images/list/010.gif" width="9" height="9" /> </span>
	           		 			 <span class="STYLE1">[
		           		 			 <c:if test="${section.status == 0}">
		           		 				<a href="#" onclick="deleteLevelOne(${section.sectionId})">删除</a>
		           		 			 </c:if>
				  					 <c:if test="${section.status == 1}">
				  					 	否
				  					 </c:if>
			  					 ]</span>
	           		 		</div>
	           		 	</td>
				    </c:if>
				    <c:if test="${status.index %2 == 1}">
				    	<td class="STYLE2 STYLE1" bgcolor="#F1FFBF" align="center" id="td_${section.sectionId}">${section.title}</td>
				  		<td class="STYLE2 STYLE1" bgcolor="#F1FFBF" align="center"  id="td_${section.sectionId}_folderName">${section.folderName}</td>
				  		<td class="STYLE2 STYLE1" bgcolor="#F1FFBF" align="center">${section.subCount}</td>
				  		<td height="18" bgcolor="#F1FFBF">
				  			<div align="center"><img src="${backPath}/images/list/037.gif" width="9" height="9" />
				  				<span class="STYLE1"> [</span><a href="#" onclick="listLevelTwo('td_${section.sectionId}',${section.sectionId})">查看子栏目</a><span class="STYLE1">]</span>
				  			</div>
				  		</td>
				  		<td height="18" bgcolor="#F1FFBF">
				  			<div align="center"><img src="${backPath}/images/list/037.gif" width="9" height="9" />
				  				 <span class="STYLE1">[
					  				 <c:if test="${section.status == 0}">
					  					<a href="#" onclick="editTitle('td_${section.sectionId}',${section.sectionId})">编辑</a>
					  				</c:if>
					  				 <c:if test="${section.status == 1}">
				  					 	否
				  					 </c:if>
			  					 ]</span>
				  			</div>				  			
				  		</td>
	           		 	<td height="18" bgcolor="#F1FFBF">
	           		 		<div align="center">
	           		 			<span class="STYLE2"><img src="${backPath}/images/list/010.gif" width="9" height="9" /> </span>
	           		 			<span class="STYLE1">
	           		 				[<c:if test="${section.status == 0}">
	           		 					<a href="#" onclick="deleteLevelOne(${section.sectionId})">删除</a>
	           		 				</c:if>
	           		 				<c:if test="${section.status == 1}">
			  					 		否
			  					 	</c:if>
			  					 ]</span>
	           		 		</div>
	           		 	</td>
	          		</c:if>	          		
          		</tr>
          	  </c:forEach>     	
          </s:else>	               
        </table>
	        <div align="center" class="STYLE2 STYLE1">
	        		<font color="red"><s:actionerror/></font>
		       		<font color="blue"><s:actionmessage/></font>
		    </div>		    
        </td>
        <td width="9" background="${backPath}/images/list/tab_161.gif">&nbsp;</td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td height="0">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="15" height="29"><img src="${backPath}/images/list/tab_201.gif" width="15" height="29" /></td>
        <td width="1000" background="${backPath}/images/list/tab_211.gif"></td>
        <td width="14"><img src="${backPath}/images/list/tab_221.gif" width="14" height="29" /></td>
      </tr>
    </table></td>
  </tr>
</table></td>
    <td background="${backPath}/images/mail_rightbg.gif">&nbsp;</td>
  </tr>
  <tr>
    <td valign="bottom" background="${backPath}/images/mail_leftbg.gif"><img src="${backPath}/images/buttom_left2.gif" width="17" height="17" /></td>
    <td background="${backPath}/images/buttom_bgs.gif"><img src="${backPath}/images/buttom_bgs.gif" width="17" height="17"></td>
    <td valign="bottom" background="${backPath}/images/mail_rightbg.gif"><img src="${backPath}/images/buttom_right2.gif" width="16" height="17" /></td>
  </tr>
</table>
<%-- 一级栏目编号隐藏域 --%>
<input id="section.sectionId" type="hidden" name="section.sectionId" />
<%-- 一级栏目标题隐藏域 --%>
<input id="section.title" type="hidden" name="section.title"/>
<%-- 一级栏目文件夹名称隐藏域 --%>
<input id="section.folderName" type="hidden" name="section.folderName"/>
</form>
</body>
</html>